<template>
  <div class="flex content-box intro-y">
    <div class="w-1/2 pr-3">
      <hBase :args="args" class="h-full" @single="single" :type="1">
        <template #parts>
          <el-table-column prop="cateMainCode" label="编码" width="180"/>
          <el-table-column prop="cateMainName" label="名称" width="180"/>
          <el-table-column prop="scope" label="范畴" width="180"/>
          <el-table-column/>
        </template>
        <template #edit="{ init, close }">
          <edit :init="init" @close="close"></edit>
        </template>
      </hBase>
    </div>
    <div class="w-1/2">
      <hBase :args="args2" class="h-1/2" @single="single2" :type="1">
        <template #parts>
          <el-table-column prop="cateSubCode" label="编码" width="180"/>
          <el-table-column prop="cateSubName" label="名称" width="180"/>
          <el-table-column prop="scope" label="范畴" width="180"/>
          <el-table-column/>
        </template>
        <template #edit="{ init, close }">
          <edit2 :init="init" @close="close"></edit2>
        </template>
      </hBase>
      <hBase :args="args3" class="h-1/2">
        <template #parts>
          <el-table-column prop="cateDetailCode" label="编码" width="180"/>
          <el-table-column prop="cateDetailName" label="名称" width="180"/>
          <el-table-column prop="scope" label="范畴" width="180"/>
          <el-table-column/>
        </template>
        <template #edit="{ init, close }">
          <edit3 :init="init" @close="close"></edit3>
        </template>
      </hBase>
    </div>
  </div>
</template>

<script setup>
import {watch, onMounted, nextTick, computed, ref} from "vue";
import hBase from "../base/hBase.vue";
import * as $api from "@/api/api.js";
import edit from "./Edit.vue"
import edit2 from "./Edit2.vue"
import edit3 from "./Edit3.vue"

const userKey = ref(localStorage.getItem("userKey"));
const cateMainKey = ref("");
const cateSubKey = ref("");
const freshen = ref(0);
const freshen2 = ref(0);
const args = computed(() => {
  return {
    search: $api.CategoryReferMain,
    remove: $api.CategoryDeleteMain,
    extendClass: "",
    titleText: "一级分类",
    isPaging:false,
    key: (e) => {
      return {
        userKey: userKey.value,
        key: e.cateMainKey
      };
    },
  };
});
const args2 = computed(() => {
  console.log("args2 is being recomputed");
  return {
    search: cateMainKey.value ? $api.CategoryReferSub : "",
    remove: $api.CategoryDeleteSub,
    extendClass: "",
    titleText: "二级分类",
    isPaging:false,
    freshen: freshen.value,
    key: (e) => {
      return {
        userKey: userKey.value,
        key: e.cateSubKey
      };
    },
    keyword: (e) => {
      e.key = cateMainKey.value;
      e.userKey = userKey.value;
      return e;
    },
  };
});
const args3 = computed(() => {
  return {
    search: cateSubKey.value ? $api.CategoryReferDetail : "",
    remove: $api.CategoryDeleteDetail,
    extendClass: "",
    titleText: "三级分类",
    isPaging:false,
    freshen: freshen2.value,
    key: (e) => {
      return {
        userKey: userKey.value,
        key: e.cateDetailKey
      };
    },
    keyword: (e) => {
      e.key = cateSubKey.value;
      e.userKey = userKey.value;
      return e;
    },
  };
});
const single = (e) => {
  if (e) {
    cateMainKey.value = e.cateMainKey;
    freshen.value++;
  }
}
const single2 = (e) => {
  if (e) {
    cateSubKey.value = e.cateSubKey;
    freshen2.value++;
  }
}
</script>

<style></style>